<template>
	<view>
		<wd-overlay :show="showPopup">
		  <view class="wrapper">
		    <view class="block">
			  <view class="closeicon"><wd-icon name="close" size="22px" @click="closepopup"></wd-icon></view>
			  <view class="info-item">
				  <text class="section-title">房间</text>
				  <wd-input-number v-model="dataNum.room" />
			  </view>
			  <view class="info-item">
				  <text class="section-title">成人</text>
				  <wd-input-number v-model="dataNum.adult" />
			  </view>
			  <view class="info-item">
				  <text class="section-title">儿童</text>
				  <wd-input-number v-model="dataNum.children" />
			  </view>
			  <button class="btn" @click="commit">确定</button>
			</view>
		  </view>
		</wd-overlay>
	</view>
</template>

<script setup>
	import {reactive} from "vue";
	const props = defineProps({
	  showPopup:  {
			type: Boolean,
			default: false //默认不显示
		},
	}); 
	const emit = defineEmits(['close']); 
	
	const dataNum = reactive({
		room:1,
		adult:1,
		children:1
	}) 
    // 隐藏弹出层
    const closepopup = () => {
      emit('close',''); 
    }; 
	
	function commit() {
      emit('close',dataNum); 
	}
	
</script>

<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  border-radius: 10rpx;
  width: 70%;
  height: 500rpx;
  background-color: #fff;
  text-align: center;
  padding:0 5%;
}
.closeicon{
	/* border: 1rpx solid; */
	width: 100%;
	padding: 5% 0;
	text-align: right;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  font-size: 28rpx;
  border-bottom: 1px solid #eee;
}
.btn{
	margin: 30rpx 0;
	color: #fff;
	font-size: 28rpx;
	background-color: #1AAC82;
}
</style>
